import React from 'react';
import './dialog.scss';
interface DialogProps {
    /** 显示控制 */
    show: boolean;
    /** 弹框高度 */
    height?: string | number;
    /** body插槽内容 */
    children?: {
        body?: JSX.Element | React.ClassicComponent | React.FunctionComponent | null;
        footer?: JSX.Element | React.ClassicComponent | React.FunctionComponent | null;
    };
    /** 弹窗title */
    title?:string;
    /** 是否显示关闭按钮 */
    showClose?: boolean;
    onCancle?: () => void;
}
class Dialog extends React.Component<DialogProps> {
    firstShow: boolean;
    node: HTMLDivElement;
    constructor (props: DialogProps) {
        super(props);
        this.firstShow = false;
    }

    /**
     * @function componentDidUpdate 处理显示变化时，数据更新
     */
    componentDidUpdate (): void {
        const { show } = this.props;
        if (!show && !this.firstShow) {
            document.body.style.overflow = '';
        } else if (show && this.firstShow) {
            this.firstShow = false;
        }
        if (show) {
            document.body.style.overflow = 'hidden';
        }
    }

    shouldComponentUpdate (nextProps: Readonly<DialogProps>): boolean {
        if (nextProps.show !== this.props.show) {
            return true;
        }

        return false;
    }

    render () {
        const { show, title, showClose, children, onCancle } = this.props;

        return (<div className='dialog-container-screen' style={{ visibility: show ? 'visible' : 'hidden' }}>
            <div className={`dialogContainer ${show ? 'dialog-container-join' : ''}`}>
                <header className='dialog-header'>
                    <div className='headerLabel'>{title ? title : ''}</div>
                    <div className='headerClose' style={{ display: showClose ? '' : 'none' }}><button onClick={onCancle}>X</button></div>
                </header>
                <main className='dialog-main'>
                    {children!.body}
                </main>
                <footer className='dialog-footer'>
                    {children.footer ? children!.footer : <div className='footer-button'>
                        <button className='footer-button-access'>确认</button>
                        <button className='footer-button-close' onClick={onCancle}>关闭</button>
                    </div>}
                </footer>
            </div>
        </div>);
    }
}

export default Dialog;
